import React, { useState } from 'react'
import './App.css'
import { Layout, theme, Menu, MenuProps } from 'antd'
import { SelectInfo } from 'rc-menu/lib/interface'
import routes from './router'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'

const { Header, Content, Footer, Sider } = Layout

const App: React.FC = (props) => {
    // 获取 navigate hooks
    const navigate = useNavigate()
    // 获取token
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken()
    // 获取 location hooks
    const location = useLocation()
    // 获取当前路由
    const _routes = (location.pathname as string)
        .split('/')
        .filter((item) => item)
    // 顶部导航列表
    const topNav = routes.map((item) => {
        return {
            key: item.path,
            label: item.meta?.title,
        }
    })
    // 顶部导航默认选中keys
    const [topNavKeys] = useState<string[]>(
        _routes.length > 0 ? [`/${_routes[0]}`] : []
    )
    // 获取侧边菜单栏数据
    const getSideMenu = (nowPath: string = `/${_routes[0]}`) => {
        let menus = routes.find((item) => item.path === nowPath)?.children || []
        // 定义方法 路由表生成新的菜单配置
        const getMenu: (menus: any[]) => MenuProps['items'] = (
            menus: any[]
        ) => {
            return menus.map((item, index) => {
                const { fullpath, children, meta, icon } = item
                const it = { children, label: meta.title, icon, key: fullpath }
                if (it.children) it.children = getMenu(it.children)
                return it
            })
        }
        return getMenu(menus)
    }
    // 侧边栏菜单数据
    const [sideMenus, setSideMenus] = useState<MenuProps['items']>(
        getSideMenu()
    )
    // 侧边栏菜单选中 keys
    const [sideMenuKeys, setSideMenuKeys] = useState<string[]>([])

    // 侧边栏菜单点击事件
    const handleSideMenu = (event: SelectInfo) => {
        console.log(event, event.key)

        navigate(event.key)
    }
    // 顶部导航点击事件
    const handleTopMenu = (event: SelectInfo) => {
        setSideMenuKeys(event.keyPath)
        setSideMenus(getSideMenu(`${event.key}`))
    }
    return (
        <Layout>
            <Header style={{ display: 'flex', alignItems: 'center' }}>
                <div className='demo-logo' />
                <Menu
                    theme='dark'
                    mode='horizontal'
                    defaultSelectedKeys={topNavKeys}
                    items={topNav}
                    style={{ flex: 1, minWidth: 0 }}
                    onSelect={handleTopMenu}
                />
            </Header>
            <Content style={{ padding: '0 48px' }}>
                <Layout
                    style={{
                        padding: '24px 0',
                        height: 'calc(100vh - 131px)',
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                    }}
                >
                    <Sider style={{ background: colorBgContainer }} width={200}>
                        <Menu
                            mode='inline'
                            defaultSelectedKeys={sideMenuKeys}
                            defaultOpenKeys={['sub1']}
                            style={{ height: '100%' }}
                            items={sideMenus}
                            onSelect={handleSideMenu}
                        />
                    </Sider>
                    <Content style={{ padding: '0 24px', minHeight: 280, backgroundColor: 'rgb(223, 223, 223)' }}>
                        <Outlet />
                    </Content>
                </Layout>
            </Content>
            <Footer style={{ textAlign: 'center' }}>
                Ant Design ©{new Date().getFullYear()} Created by Ant UED
            </Footer>
        </Layout>
    )
}

export default App
